import { activityModel } from '@/models/activity'
import { ActivityFormBO, getActivityInfo } from '@/services/ActivityService'

import { ProFormSelect, ProFormText, ProFormUploadButton, ProFormUploadDragger } from '@ant-design/pro-form'
import { Modal } from 'antd'
import { observer } from 'mobx-react-lite'

import { StepsForm } from '@ant-design/pro-form/es/layouts/StepsForm'
import { useEffect } from 'react'

import { getMpList, MpVO } from '@/services/MpService'
import { PageContainer, ProFormDateTimePicker, ProFormDigit } from '@ant-design/pro-components'
import Cropper from 'react-easy-crop'
import { useSearchParam } from 'react-use'
import styled from 'styled-components'

const CropDiv = styled.div`
  position: relative;
  width: 100%;
  min-height: 500px;
`
const CropImg = styled.img`
  width: 300px;
`
const ActivityEdit = () => {
  let activityId = useSearchParam('activityId')
  let type = useSearchParam('type')
  useEffect(() => {
    if (type === undefined) return
    if (type === 'edit') {
      // 查询活动设置
      getActivityInfo(activityId || '').then(activityModel.setActivityBO)
    } else {
      activityModel.initActivityBO()
    }
  }, [type])
  return (
    <PageContainer>
      {activityModel.activity && (
        <StepsForm<ActivityFormBO> onFinish={activityModel.saveActivity}>
          <StepsForm.StepForm<ActivityFormBO> initialValues={activityModel.activity} title="设置基本信息">
            <ProFormText hidden name="id" />
            <ProFormSelect<MpVO>
              colProps={{ span: 8 }}
              label="公众号"
              name="bindWpId"
              request={getMpList}
              fieldProps={{
                fieldNames: { label: 'nickName', value: 'appId' },
                optionItemRender: (item) => (
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <span>{item.nickName}</span>
                    <span>{item.type}</span>
                  </div>
                ),
              }}
            />
            <ProFormText colProps={{ span: 8 }} label="活动名称" name="activityName" />
            <ProFormText colProps={{ span: 4 }} label="分享标题" name="shareTitle" />
            <ProFormDateTimePicker colProps={{ span: 5 }} label="活动开始时间" name="startTime" />
            <ProFormDateTimePicker colProps={{ span: 5 }} label="活动结束时间" name="endTime" />
          </StepsForm.StepForm>
          <StepsForm.StepForm<ActivityFormBO> title="设置活动信息" initialValues={activityModel.activity}>
            <ProFormUploadDragger
              fieldProps={{
                name: 'file',
                onChange: (info) => {
                  if (info.file.status === 'done') {
                    activityModel.setImgUrl(info.file.response.data[0].url)
                  }
                },
              }}
              transform={(v) => {
                if (v[0].status === 'done') {
                  let url = v[0].response.data[0].url
                  return { sharePoster: url || '' }
                }
                return { sharePoster: undefined }
              }}
              action={'/api/file/upload'}
              label="裂变海报"
            />
            {activityModel.imgUrl && (
              <CropDiv onClick={activityModel.openCropModal}>
                <div>点击图片设置二维码位置</div>
                <CropImg src={activityModel.imgUrl} />
              </CropDiv>
            )}
            <Modal
              title="框选海报二维码位置"
              width={500}
              open={activityModel.cropModalState}
              onCancel={activityModel.closeCropModal}
              onOk={activityModel.cropModalOk}
            >
              <CropDiv>
                <Cropper
                  zoomWithScroll
                  zoom={activityModel.cropZoom}
                  aspect={3 / 3}
                  maxZoom={100}
                  onZoomChange={activityModel.setZoom}
                  image={activityModel.imgUrl}
                  crop={activityModel.crop}
                  onCropChange={activityModel.setCrop}
                  onCropAreaChange={activityModel.setCropArea}
                />
              </CropDiv>
            </Modal>
            <ProFormUploadButton
              label="页面海报"
              listType={'picture'}
              accept={'picture'}
              action={'/api/file/upload'}
              onChange={(info) => activityModel.setPosterFileList(info.fileList)}
              fieldProps={{
                multiple: true,
                fileList: activityModel.posterFileList,
              }}
              name="posters"
              max={10}
            >
              上传海报
            </ProFormUploadButton>
          </StepsForm.StepForm>
          <StepsForm.StepForm<ActivityFormBO> title="设置积分计算规则" initialValues={activityModel.activity}>
            <ProFormDigit label="首次关注公众号" rules={[{ min: 0, type: 'number' }]} name={'firstSubscribe'} />
            <ProFormDigit label="首次参加活动" rules={[{ min: 0, type: 'number' }]} name={'firstEnter'} />
            <ProFormDigit label="首次分享" rules={[{ min: 0, type: 'number' }]} name={'firstShare'} />
          </StepsForm.StepForm>
        </StepsForm>
      )}
      {/*</ProForm>*/}
    </PageContainer>
  )
}

export default observer(ActivityEdit)
